Add Image Prefetching for Click to expand Images #61107

Takshil-Kunadia · 2024-04-25T16:49:42Z

What?

Prefetch full-resolution image to speed up display of Click to expand images.
see #60883 for more details

Why?

Hovering over a click-to-expand image block does not proactively attempt to prefetch the full-scale image in Lighbox. This can result in a prolonged period in which the low-resolution scaled-up image is displayed in the lightbox.

How?

Implement prefetchImage action that prefetches an image and keeps it in the browser cache.
Then utilising the above add pointer event directives that trigger it on pointerup & pointerdown.

Testing Instructions

Create a post with a click to expand image on it.
Open Dev tools and throttle network to slow 3G and notice the network tab.
Hover over the image, this will trigger the image to load.
When the loading is complete, click the image for it to load in full resolution without any delay or loading.

Testing Instructions for Keyboard

Screenshots or screencast

github-actions · 2024-04-25T16:49:58Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Takshil-Kunadia <[email protected]>
Co-authored-by: luisherranz <[email protected]>
Co-authored-by: westonruter <[email protected]>
Co-authored-by: artemiomorales <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

artemiomorales · 2024-05-03T16:50:30Z

@Takshil-Kunadia Thanks for creating this PR! I've left a comment on the issue to loop a few other folks into the discussion who may have thoughts on how to best proceed. In short, we previously had prefetching on hover but removed it. Since then, there's been more discussion around this, so perhaps may be good to add this back.

Takshil-Kunadia · 2025-06-17T18:19:03Z

Thanks @artemiomorales ! for the context and for looping the stakeholders in the discussion! I've updated the code to reflect the direction discussed in the issue. Happy to adjust further based on any additional feedback 😄

westonruter · 2025-06-21T15:44:39Z

I'm just realizing a problem here with the overall image lightbox: what if the original src image is too large for the viewport when the image is expanded (e.g. on mobile)? Shouldn't the expanded lightbox image copy the srcset as well? If this is the case, prefetching the src wouldn't necessarily be correct since a smaller size could be more appropriate. This could be achieved simply by copying the srcset of the original image to lightbox image and also adding it to the imagesrcset of the prefetch link. In addition to this, an appropriate sizes attribute would need to be created specifically for the lightbox image, although the browser default of 100vw would probably be correct for the lightbox image. In this way, the lightbox would avoid downloading a larger image than needed, and this further speeding up displaying of the expanded image.

Takshil-Kunadia · 2025-06-22T08:01:15Z

Thanks! @westonruter for looking into this 🙇🏻‍♂️ and yes good catch! it makes sense to have responsive images for lightbox images to avoid unnecessarily large downloads, especially on smaller viewports.

One thing I’d like to highlight though is that imagesrcset and imagesizes are supported with preload, not with prefetch afaik (reference: https://web.dev/articles/preload-responsive-images). This would slightly deviate from the original approach discussed in the issue which was on using prefetch as part of speculative loading.

That said, I’ve implemented the suggested preload approach in d7f2e41

luisherranz

Hey, just a couple of comments 🙂

packages/block-library/src/image/view.js

…ad delay constant

packages/block-library/src/image/view.js

westonruter · 2025-06-24T22:58:13Z

packages/block-library/src/image/view.js

+				const srcset = imageMetadata.lightboxSrcset;
+				if ( srcset ) {
+					imageLink.setAttribute( 'imagesrcset', srcset );
+					imageLink.setAttribute( 'imagesizes', '100vw' );
+				}


Shouldn't enlargedSrcset and enlargedSizes be used here?

We can use the getter functions, but for that we need to temporarily set the currentImageId to use them and then reset the Id when we have preloaded the image.

for that we need to temporarily set the currentImageId to use them and then reset the Id when we have preloaded the image

I don't think it would be a good approach, as there can be more than one image preloading at the same time.

Why don't you just use imageMetadata.lightboxSizes || '100vw' instead of just '100vw' here?

That was how it was implemented previously. I changed it in cab1562 to use the getter fns.
Reverted this commit ↩️ along with the dynamic lightboxSizes change

packages/block-library/src/image/view.js

This reverts commit cab1562.

westonruter · 2025-06-25T20:36:02Z

packages/block-library/src/image/view.js

+/**
+ * Returns the appropriate src URL for an image
+ *
+ * @param {Object} imageMetadata Image metadata object
+ * @return {string} The source URL
+ */
+function getImageSrc( imageMetadata ) {
+	return (
+		imageMetadata.uploadedSrc ||
+		'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
+	);
+}
+
+/**
+ * Returns the appropriate srcset for an image
+ *
+ * @param {Object} imageMetadata Image metadata object
+ * @return {string} The srcset value
+ */
+function getImageSrcset( imageMetadata ) {
+	return imageMetadata.lightboxSrcset || '';
+}
+
+/**
+ * Returns the appropriate sizes attribute for an image
+ *
+ * @param {Object} imageMetadata Image metadata object
+ * @return {string} The sizes value, defaulting to 100vw
+ */
+function getImageSizes( imageMetadata ) {
+	return imageMetadata.lightboxSizes || '100vw';
+}


Minor improvement, to add typing for the passed prop:

Suggested change

/**

* Returns the appropriate src URL for an image

*

* @param {Object} imageMetadata Image metadata object

* @return {string} The source URL

*/

function getImageSrc( imageMetadata ) {

return (

imageMetadata.uploadedSrc ||

'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='

);

}

/**

* Returns the appropriate srcset for an image

*

* @param {Object} imageMetadata Image metadata object

* @return {string} The srcset value

*/

function getImageSrcset( imageMetadata ) {

return imageMetadata.lightboxSrcset || '';

}

/**

* Returns the appropriate sizes attribute for an image

*

* @param {Object} imageMetadata Image metadata object

* @return {string} The sizes value, defaulting to 100vw

*/

function getImageSizes( imageMetadata ) {

return imageMetadata.lightboxSizes || '100vw';

}

/**

* Returns the appropriate src URL for an image.

*

* @param {string} uploadedSrc - Full size image src.

* @return {string} The source URL.

*/

function getImageSrc( { uploadedSrc } ) {

return (

uploadedSrc ||

'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='

);

}

/**

* Returns the appropriate srcset for an image.

*

* @param {string} lightboxSrcset - Image srcset.

* @return {string} The srcset value.

*/

function getImageSrcset( { lightboxSrcset } ) {

return lightboxSrcset || '';

}

/**

* Returns the appropriate sizes attribute for an image.

*

* @param {string} lightboxSizes - Image responsive sizes attribute.

* @return {string} The sizes value, defaulting to 100vw.

*/

function getImageSizes( { lightboxSizes } ) {

return lightboxSizes || '100vw';

}

Made the changes ✅

westonruter

Aside from the minor suggestion in #61107 (comment) this looks good to me. It is successfully preloading the image prior to opening it in the lightbox.

It can be hard to see, but in the before case the image is a bit blurry while the full size image is loaded:

Before	After
without-preload.mov	with-preload.mov

Takshil-Kunadia requested review from artemiomorales and michalczaplinski as code owners April 25, 2024 16:49

Takshil-Kunadia force-pushed the feature/prefetch-lightbox-images branch from 68fcd2d to 5c10b84 Compare April 25, 2024 16:58

artemiomorales mentioned this pull request May 3, 2024

Click-to-expand images could prefetch full-resolution image to speed up display #60883

Open

shail-mehta added [Type] Enhancement A suggestion for improvement. [Block] Image Affects the Image Block labels Jun 15, 2024

Takshil-Kunadia force-pushed the feature/prefetch-lightbox-images branch from 5c10b84 to e6133b0 Compare November 15, 2024 21:07

michalczaplinski removed their request for review December 5, 2024 17:38

Takshil-Kunadia force-pushed the feature/prefetch-lightbox-images branch from e6133b0 to 7593d56 Compare June 17, 2025 15:52

Takshil-Kunadia force-pushed the feature/prefetch-lightbox-images branch from 27aa823 to 6dd8ed5 Compare June 18, 2025 05:05

cbravobernal requested review from felixarntz and westonruter June 18, 2025 08:22

Takshil-Kunadia added 8 commits June 21, 2025 21:15

Add image prefetching for lightbox images

d8e6f5e

Fix PHPUnit test

6f66cb1

feat: add delay before prefetching

e345cc6

docs: update docs

78f0f64

fix: track prefetched images to avoid duplicate markup

579d32e

docs: add context comments

6c5b0cd

feat: implement responsive image preloading for lightbox images

d7f2e41

refactor: rectify approach to accurate name

3ab6bc0

Takshil-Kunadia force-pushed the feature/prefetch-lightbox-images branch from 3e26db9 to 3ab6bc0 Compare June 22, 2025 07:52

luisherranz reviewed Jun 24, 2025

View reviewed changes

packages/block-library/src/image/view.js Outdated Show resolved Hide resolved

packages/block-library/src/image/view.js Outdated Show resolved Hide resolved

Takshil-Kunadia added 3 commits June 24, 2025 17:32

fix: remove URL validation

dd686d5

refactor: relocate srcset assignment for better readability

06e3f74

docs: add context comment

1fa9abe